<style >
/*@import '../assets/main.css'*/
.transaction.login_content{  
/*    min-width: 1280px;
    min-height: 650px;
    height: 100vh;
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    color: #9ba2a8;*/
    background: #4e4f59;
  }
  
.kline_record,.kline_buysell,.kline_record  .el-table th,.kline_record   .el-table tr{background: #000;}
#kline_container{
	/*    position: fixed;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    top: 0;*/
}
.kline_record .el-tabs__item{
	height:24px;
	line-height: 24px;
	color:#9ba2a8;
}
.kline_record .el-tabs__item.is-active {
    color: #409EFF;
}
.kline_record .el-tabs__nav-wrap:after{
	background-color: #454a54;
}
.kline_record .el-table{
	background: #000;
	/*color: #f9f9fa;*/
}
.kline_record .el-table thead{
	color:#fff;

}

.kline_record  .el-table th,.kline_record   .el-table tr{border-color:#454a54;}
.kline_record .el-table td,.kline_record  .el-table th{padding:0;}
.kline_record .el-table .cell{line-height: 25px;}
.kline_record .el-table::before{background-color:#000;}
.kline_record .el-pagination .btn-next,.kline_record .el-pagination .btn-prev,.kline_record  .el-pager li,.kline_record  .el-pagination__jump .el-input__inner{background-color:#000;}
.kline_record  .el-pagination__jump .el-input__inner{color:#fff;border-color:#9ba2a8;}
.kline_content{
	display: flex;
	margin-top:4px;
}
.kline_record{flex:1;    margin-right: 2px;}
.kline_buysell{display: flex;padding:5px;margin-left:2px;}
.kline_buysell .usercenter_cc{width: 50%;padding:5px;}
.kline_buysell .list_header{padding:0;font-size: 12px;margin-bottom:5px;background: #000;color:rgb(175, 180, 184);border-bottom: 1px solid #454a54;}
.kline_buysell .el-form-item{
		 border:1px solid #444;
		 display: flex;
		 padding:0 5px;
		 margin-bottom: 10px;
}
.kline_buysell .el-form-item__content{line-height: 30px;}
.kline_buysell .el-form-item__label{font-size: 12px;line-height: 30px;color: #a0aaaa;}
.kline_buysell .el-input__inner{
	    color: #a0aaaa;
        background-color: #000;
       border:none;
       text-align: right;
       height:30px;
       line-height: 30px;
       font-size: 12px;
}
.kline_buysell .kline_alt,.kline_buysell .list_text,.kline_buysell .list_rate{
	    color: #a0aaaa;
		font-size: 12px;
		margin-bottom: 5px;
}
.kline_buysell .list_rate{text-align: right;color:#333;}
.kline_buysell .list_rate span{
	background-color: #666;
	    display: inline-block;
    padding: 2px 5px 1px;
    border-radius: 10px;
}
.kline_buysell .list_text{
	display: flex;
	justify-content: space-between;
}
.kline_buysell .kline_alt span{
	color:#de5959;
}
.kline_buysell .kline_alt_right span{
	color:#21b68a;
}

.kline_buysell .span_btn_all{    width: 450px;
    height: 30px;
    font-size:14px;
    color: #fff;
    font-size: 14px;
    background: #21b68a;
    padding:5px;
    border-radius: 3px;}
.kline_buysell .span_btn_red{background: #de5959;border:none;}
.kline_buysell .span_btn_all:hover,.kline_buysell .span_btn_all:focus{opacity: 0.9; background: #21b68a;}
.kline_buysell .span_btn_red:hover,.kline_buysell .span_btn_red:focus{opacity: 0.9; background: #de5959;}
.list_slider .el-slider__button-wrapper{
    width: 24px;
    height: 24px;
    top: -11px;
}
.list_slider .el-slider__button{
	    background-color: #de5959;
        width: 14px;
	    height: 14px;
	    border: 0;
}
.kline_buysell .list_slider{padding:10px;width:80%;margin:0 auto;}
.list_slider .el-slider__bar{height:2px;background: #de5959;}
.list_slider_right .el-slider__button{
	background-color: #21b68a;
}
.list_slider_right .el-slider__bar{height:2px;background: #21b68a;}

.list_slider .el-slider__runway{
	height: 2px;
    background: #444;
    margin: 0;
}
</style>
<template>
  <div class="">
    <div class="login_main transaction">
      <div class="header_index">
        <myHeader></myHeader>

      </div>
      <div class="login_content transaction">     

     	<div class="kline">

		    <!-- <h1>K线图</h1> -->

		    <div id="kline_container"></div>
		</div>
		<div class="kline_content">
			<div class="kline_record">
				<el-tabs v-model="activeName" >
					    <el-tab-pane  label="未完成委托" name="first">
					    	<el-table  :data="entrustlist"   style="width: 100%" :ref="entrustlist" >
							    <el-table-column   prop="currname"  label="委托时间" >
							    </el-table-column>
							    <el-table-column   prop="price" label="类型">
							    </el-table-column>
							    <el-table-column   prop="dealnum" label="委托价格">
							    </el-table-column>
						        <el-table-column   prop="pricetotal" label="委托数量">
						        	
							    </el-table-column>
						        <el-table-column   prop="dealnum" label="委托总额">
						        	
							    </el-table-column>
							  	 <el-table-column   prop="status" label="状态">
						        	
							    </el-table-column>
							  
							    <el-table-column label="操作">
						            <template slot-scope="scope">					       
						              <span class="span_btn"  @click="handleDeal(scope.$index, scope.row)" >撤单</span>				           
						             
						            </template>
					            </el-table-column>
						    </el-table>
						    <!--工具条-->
						    <el-col :span="24" class="toolbar toolbar_footer">			     
						      <el-pagination  layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange" :page-size="showCount" :total="total" style="float:right;">
						      </el-pagination>
						    </el-col>
					    </el-tab-pane>
						<el-tab-pane  label="成交记录" name="second">
				    		<el-table  :data="deallist"   style="width: 100%" :ref="deallist" >
							    <el-table-column   prop="currname"  label="成交时间" >
							    </el-table-column>
							    <el-table-column   prop="price" label="类型">
							    </el-table-column>
							    <el-table-column   prop="dealnum" label="成交价格">
							    </el-table-column>
						        <el-table-column   prop="pricetotal" label="成交数量">
						        	
							    </el-table-column>
						        <el-table-column   prop="dealnum" label="成交总额">
						        	
							    </el-table-column>
							
							  
						    </el-table>
						    <!--工具条-->
						    <el-col :span="24" class="toolbar toolbar_footer">			     
						      <el-pagination  layout="prev, pager, next,total,jumper" @current-change="handleCurrentChange1" :page-size="showCount" :total="total1" style="float:right;">
						      </el-pagination>
						    </el-col>
					    </el-tab-pane>
						  
					</el-tabs>
			</div>
			<div class="kline_buysell">
				<div class="usercenter_cc">
      				<div class="list_header">买入BTC</div>
      				<div class="list_content">
      					<div class="kline_alt">我的余额:<span> 0</span> BTCX</div>
      					<div class="kline_alt">可买入量:<span> 0</span> BTC</div>
  						<el-form  class="list_form"  :model="buyForm">
				            <el-form-item label="买入价" >
				               <el-input v-model="buyForm.buyprice" >
							  </el-input>
				            </el-form-item>
				          	 <el-form-item label="买入量" class="list_buynum">
				               <el-input v-model="buyForm.buynum"  placeholder="请输入买入量" >
							  </el-input>
				            </el-form-item>
				            <div class="list_text">
				            	<span>预计交易额</span>
				            	<span>0.00000 BTCX</span>
				            </div>
				            <div class="list_slider">
				            	<el-slider v-model="buyForm.slidernum"></el-slider>
				            </div>
				            <div class="list_rate">
				            	<span>费率0.002</span>
				            	<span>手续费0.00000</span>
				            </div>
				            <!-- <el-form-item> -->
				            	<el-button style="width:100%;" class="span_btn_all span_btn_red	" type="success" :loading="isBtnLoading"  @click="handlebuy()" >立即买入</el-button>
				            <!-- </el-form-item> -->

			          	</el-form>
      				</div>
      			</div>
      			<div class="usercenter_cc">
      				<div class="list_header">卖出BTC</div>
      				<div class="list_content">
      					<div class="kline_alt kline_alt_right">我的余额:<span> 0</span> BTCX</div>
      					<div class="kline_alt kline_alt_right">可买入量:<span> 0</span> BTC</div>
  						<el-form  class="list_form"  :model="sellForm">
				            <el-form-item label="卖出价" >
				               <el-input v-model="sellForm.sellprice" >
							  </el-input>
				            </el-form-item>
				          	 <el-form-item label="卖出量" class="list_buynum">
				               <el-input v-model="sellForm.sellnum" placeholder="请输入卖出量" >
							  </el-input>
				            </el-form-item>
			              	<div class="list_text">
				            	<span>预计交易额</span>
				            	<span>0.00000 BTCX</span>
				            </div>
				            <div class="list_slider list_slider_right">
				            	<el-slider v-model="sellForm.slidernum"></el-slider>
				            </div>
				             <div class="list_rate">
				            	<span>费率0.002</span>
				            	<span>手续费0.00000</span>
				            </div>
				            <!-- <el-form-item> -->
				            	<el-button style="width:100%;" class="span_btn_all " type="success"  @click="handlesell()" >立即卖出</el-button>
				            <!-- </el-form-item> -->

			          	</el-form>
      				</div>
      			</div>
			</div>
		</div>
      </div>
    </div>
   
  </div>
</template>
<script>
import myHeader from './common/header'
import * as requires from '../lib/require.js'
// import '../lib/jquery'
/*import '../lib/jquery.mousewheel'
import '../lib/sockjs'
import '../lib/stomp'*/
// import '../lib/kline'
	export default {
		components:{
	        myHeader
	    },
	    data(){
	    	return {
	    		isBtnLoading:false,
	    		buyForm:{buyprice:0,buynum:'0.0000'},
				sellForm:{sellprice:0,sellnum:'0.0000',},
	    		entrustlist:[],
	    		deallist:[],
		    	activeName:'first',
		      	showCount:20,
			  	total:20,
			  	page:1,
			  	total1:20,
			  	page1:1,


	    	}
	    },
	    methods:{
    		handleCurrentChange(val) {
		      	this.page = val;
		      	// this.getUsers();
		      	this.fetchData();
		    },
		    handleCurrentChange1(val) {
		      	this.page1 = val;
		      	// this.getUsers();
		      	this.fetchData1();
		    },
	    	klineConfig(){
			  	this.$nextTick(() => {			
	    		  requires.requirek.config({				    
				         paths: {
				            "jquery": "../lib/jquery",
				            "jquery.mousewheel": "../lib/jquery.mousewheel",
				            "sockjs": "../lib/sockjs",
				            "stomp": "../lib/stomp",
				            "kline": "../lib/kline"
				        },
				        shim: {
				            "jquery.mousewheel": {
				                deps: ["jquery"]
				            },
				            "kline": {
				                deps: ["jquery.mousewheel", "sockjs", "stomp"]
				            }
				        }
				    });
				    let para1=['kline'];
	    		  	// console.log(requires.requirek(para1));
				    requires.requirek(['kline'], function () {
				        var kline = new Kline({
				            element: "#kline_container",
				            width: '100%',
				            /*height: '100%',
				             width: 1200,*/
				            height: 650,
				            theme: 'dark', // light/dark
				            language: 'zh-cn', // zh-cn/en-us/zh-tw
				            ranges: ["1w", "1d", "1h", "30m", "15m", "5m", "1m", "line"],
				            symbol: "BTC",
				            symbolName: "BTC/USD",
				            type: "poll", // poll/socket
				            url: "/examples/mock.json",
				            // url: "http://localhost:8081/examples/mock.json",
				            limit: 1000,
				            intervalTime: 5000,
				            debug: true,
				            showTrade: true
				        });

				        kline.draw();
				    });
			    });
	    	}
	    },
	    created(){
	    	// console.log(requires.requirek);
	    	this.klineConfig();
	    }
	}
</script>